<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maxinum-scale=1,user-scalable=no">
    <title>17轮播插件 </title>
    <link rel="stylesheet" href="..\bootstrap-3.3.7-dist\css\bootstrap.min.css">
    <style>
        a:focus{
            outline: none;
        }
    </style>
</head>

<body>

    <!-- 限定长度  否则会出现白边  设置默认播放 -->
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="width:900px;">
        <ol class="carousel-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
            <li data-target="#myCarousel" data-slide-to="2"></li>
        </ol>   
        <div class="carousel-inner">
            <div class="item active">
                <img src="../img/first.png" alt="第一张">
                <div class="carousel-caption">
                    <h3>Bootstrap</h3>
                    <p>Bootstrap是一款HTML5响应式框架</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/second.png" alt="第二张">
                <div class="carousel-caption">
                    <h3>Jquery</h3>
                    <p>jQuery是一款JavaScript的开发库</p>
                </div>
            </div>
            <div class="item">
                <img src="../img/third.png" alt="第三张"> 
                <div class="carousel-caption">
                    <h3>ExtJS</h3>
                    <p>ExtJS是一款富客户端JS框架</p>
                </div>               
            </div>
        </div> 
        <!-- data-slide 设置上一张 下一章 -->
        <a href="#myCarousel" data-slide="prev" class="carousel-control left">&lsaquo;</a>
        <a href="#myCarousel" data-slide="next" class="carousel-control right">&rsaquo;</a>
    </div>    

    <button id="cycle" class="btn btn-default">开始</button>
    <button id="pause" class="btn btn-default">停止</button>
    <button id="number" class="btn btn-default">播放第三条</button>
    <button id="prev" class="btn btn-default">上一个</button>
    <button id="next" class="btn btn-default">下一个</button>


    <script src="..\bootstrap-3.3.7-dist\js\jquery-3.2.1.min.js"></script>
    <script src="..\bootstrap-3.3.7-dist\js\bootstrap.min.js"></script>
    <script type="text/javascript">

    // $('#myCarousel').carousel({
    //     interval: 1000,     // 设置自动播放/秒
    //     pause: 'hover',     // 设置暂停按钮的事件
    //     wrap: false,        // 只播放一次
    // });

    $('#cycle').on('click',function(){
        $('#myCarousel').carousel('cycle'); // 开始
    });
    $('#pause').on('click',function(){  // 停止
        $('#myCarousel').carousel('pause');
    });
    $('#number').on('click',function(){  // 停止
        $('#myCarousel').carousel(2);
    });
    $('#prev').on('click',function(){  // 停止
        $('#myCarousel').carousel('prev');
    });
    $('#next').on('click',function(){  // 停止
        $('#myCarousel').carousel('next');
    })
    $('#myCarousel').on('slide.bs.carousel',function(){
        alert('执行前调用');
    })
    $('#myCarousel').on('slid.bs.carousel',function(){
        alert('执行完毕调用');
    })
    
    

     </script>
</body>
</html>